@import "~bootstrap/scss/bootstrap";

.textBox {
    &.form-control {
        display: flex;
        flex-wrap: nowrap;

        &.disabled {
            background-color: var(--bs-secondary-bg);
            opacity: 1;        
        }

        &.textBox-focused {
            color: $input-focus-color;
            background-color: $input-focus-bg;
            border-color: $input-focus-border-color;
            outline: 0;

            @if $enable-shadows {
                @include box-shadow($input-box-shadow, $input-focus-box-shadow);
            }

            @else {
                // Avoid using mixin so we can pass custom focus shadow properly
                box-shadow: $input-focus-box-shadow;
            }
        }

        align-items: flex-start; // 
    }

    .textBox-input {
        border-width: 0;
        outline: none;

        padding-bottom: 0;
        padding-top: 0;
        flex: 1 1 0%;
    }

    .textBox-clear-button {
        // flex: 0 0 0%;

        cursor: pointer;

        &.badge {
            line-height: 1.5;
        }
    }
}